<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用单位</title>

    <style>
        /* 
        两种单位
        1.长度单位
            1)像素单位 px
                显示器都是由一个个像素点构成的，显示器上的像素我们成为物理像素(物理分辨率)
                css中 px 被称为逻辑像素
            2)百分比单位 %
                百分比单位是一个相对于父元素的百分比
            3)em 和 rem
                em 是一个字体大小的倍数值，1em表示当前字体大小的1倍。参照物是字体大小，如果设置的就是字体大小的话就参照父元素的字体大小
                rem 也是一个参照字体大小的单位，但是它的参照物是根节点字体大小
            ...
        2.颜色单位
            1)直接使用颜色的单词(缺点：不好描述)
            2)rgb值设置
                rgb单位是通过三种颜色不同浓度占比调配出来的元素
                语法：
                rgb(r,g,b)
                rgb值必须是一个数值，范围在(0,255)，其中0颜色最淡，255颜色最深。
            3)rgba值
                书写方式 rgba(r,g,b,a) 多了a值设置，设置透明值，范围在(0,1)
            4)十六进制设置颜色
                书写方式：#rgb; rgb代表rgb颜色的十六进制标志形式(三位数或六位数
            5)HSL值 和 HSLA
                属性：
                - H 色调    可选择范围(0,360)
                - S 表示饱和度  可选择范围(0%,100%)
                - L 亮度    可选择范围(0%,100%)
                - A 透明度  可选择范围(0,1)
        */

        body{
            font-size: 50px;
        }
        h2{
            font-size: 100%;
        }
        h2{
            font-size: 1em;
        }

        p{
            font-size: 3rem;
        }

        p{
            color: rgb(0,255,255);
            color: rgba(red, green, blue, .5);
        }
    </style>
</head>
<body>
    <h2>我是h2标签</h2>
    <p>普通文字</p>
</body>
</html>